<template>
  <div class="home">
    <top-view/>
    <sales-view/>
    <bottom-view/>
    <map-view/>
  </div>
</template>

<script>
 import TopView from '../components/TopView'
 import BottomView from '../components/BottomView'
 import MapView from '../components/MapView'
 import SalesView from '../components/SalesView'
 import {wordcloud,mapscatter,sceenData} from '../api/index'
export default {
  name: 'Home',
  components: { 
    TopView,
    BottomView,
    MapView,
    SalesView
  },
  data() { 
    return { 
      reportData: null,
      wordCloud: null,
      mapData: null
    }
  },
  methods: { 
    getReportData() { //必须经过methods才能有效给provide提供数据，这是provide和inject的机制
      return this.reportData
    },
    getWordCloud() { 
      return this.wordCloud
    },
    getMapData() { 
      return this.mapData
    }
  },
  provide() { //将数据提供给子组件,也可以是孙组件。。。。
    return { 
      getReportData: this.getReportData, //不要带括号，inject那边调用再加括号
      getWordCloud: this.getWordCloud,
      getMapData: this.getMapData
    }
  },
  mounted() { 
    wordcloud().then(data => { this.wordCloud = data })
    mapscatter().then(data => { this.mapData = data })
    sceenData().then(data => { this.reportData = data })
  }
}
</script>

<style lang="scss" scoped>
    .home { 
      width: 100%;
      // height: 100%; //不要高度，让背景自适应，自动拉伸
      padding: 20px;
      background: #eee;
      box-sizing: border-box;
    }
</style>